<html>
<head>
  <title>Fake Login Page</title>
</head>
<body>
<form id="form" action="javascript:sform(this)">
  <div>
    <label for="username"><b>Username:</b></label>
    <input type="text" name="username" />
  </div>

  <div>
    <label for="password"><b>Password:</b></label>
    <input type="password" name="password" />
  </div>

  <img onclick="document.getElementById('form').submit();" src="" />
</form>

<div id="result" style="display: none">
  You should not see this as the form onsubmit should override this inner
  text.
</div>

<script>
  const formSection = document.getElementById("form");
  const resultSection = document.getElementById("result");

  function sform() {

    const username = formSection.username.value;
    const password = formSection.password.value;

    formSection.style.display = "none";
    resultSection.style.display = "block";
    resultSection.innerText = `${username}:${password}`;
  };


</script>
</body>
</html>
